<template>
    <div>
        <div class="container">
          <div style="padding-bottom:10px;">
            <div class="handle-box" style="display:flex;justify-content: flex-start; flex-wrap: wrap; align-items:center;">
              <p style="padding-right:10px; font-weight: bold;font-size: large;color: mediumblue;">
                {{self.title}}
              </p>
              <template v-for="(column,key) in self.queryColumns" :key="key">
                <template v-if="column.prop != 'pageNo' && column.prop != 'pageSize' && column.hide !== true">
                  <template v-if="self.showQueryColumnsButton.showAll || column.fixed || self.query[column.prop]">
                    <template v-if="column.type == 'select'">
                      <el-select v-model="self.query[column.prop]"
                          :placeholder="column.placeholder || ('请选择:'+(column.label || column.prop))"
                          :disabled="column.disabled === true"

                          :multiple="column.multiple === true"
                          filterable
                          :allow-create="self.allowCreate"
                          :collapse-tags="true"

                          :style="'margin-bottom:10px;'+(column.width || '300px')+';'"
                          @change="self.onChange({mode: 'query', form: self.query, column, columns: self.queryColumns})"
                          :clearable="true">
                        <el-option v-for="(item,index) in column.list" :key="index" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </template>
                    <template v-else-if="column.type == 'year'">
                      <el-date-picker v-model="self.query[column.prop]"
                          :placeholder="column.placeholder || ('请选择:'+(column.label || column.prop))"
                          :disabled="column.disabled === true"

                          format="YYYY"
                          value-format="YYYY-01-01 00:00:00"
                          :type="column.type"
                          :style="'margin-bottom:10px;'+(column.width || '150px')+';'"

                          @change="self.onChange({mode: 'query', form: self.query, column, columns: self.queryColumns})"
                          :clearable="true">
                      </el-date-picker>
                    </template>
                    <template v-else-if="column.type == 'date'">
                      <el-date-picker v-model="self.query[column.prop]"
                          :placeholder="column.placeholder || ('请选择:'+(column.label || column.prop))"
                          :disabled="column.disabled === true"

                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD 00:00:00"
                          :type="column.type"
                          :style="'margin-bottom:10px;width:'+(column.width || '150px')+';'"

                          @change="self.onChange({mode: 'query', form: self.query, column, columns: self.queryColumns})"
                          :clearable="true">
                      </el-date-picker>
                    </template>
                    <template v-else-if="column.type == 'switch'">
                      <el-switch v-model="self.query[column.prop]"
                          :placeholder="column.placeholder || ('请选择:'+(column.label || column.prop))"
                          :active-text="column.activeText" :inactive-text="column.inactiveText"
                          :active-value="'activeValue' in column ? column.activeValue : 1"
                          :inactive-value="'inactiveValue' in column ? column.inactiveValue : 0"
                          active-color="'activeColor' in column ? column.activeColor : #13ce66"
                          inactive-color="'inactiveColor' in column ? column.inactiveColor : #e4e7ed"

                          :style="'margin-bottom:10px;width:'+(column.width || '100%')+';'"
                          :disabled="column.disabled === true"
                          @change="self.onChange({mode: 'query', form: self.query, column, columns: self.queryColumns})"
                          :clearable="true">
                      </el-switch>
                    </template>
                    <template v-else>
                      <el-input v-model="self.query[column.prop]"
                          :placeholder="column.placeholder || ('请输入:'+(column.label || column.prop))"
                          :disabled="column.disabled === true"
                          :style="'margin-bottom:10px;width:'+(column.width || '300px')+';'"

                          @change="self.onChange({mode: 'query', form: self.query, column, columns: self.queryColumns})"
                          :clearable="true">

                      </el-input>
                    </template>
                  </template>
                </template>
              </template>

              <el-button-group>
                <el-button type="primary" :icon="Search" style="margin-bottom:10px;"
                  @click="self.handleSearch" :loading="self.loadingSearch">
                  搜索</el-button>
                <el-popover
                  placement="top-start"
                  :width="200"
                  trigger="hover"
                  content="清空排序及查询条件"
                >
                  <template #reference>
                    <el-button type="primary" :icon="Close" style="margin-bottom:10px;padding-left:5px;padding-right:5px"
                      @click="self.resetSort">
                      </el-button>
                  </template>
                </el-popover>
                <el-popover
                  placement="top-start"
                  :width="200"
                  trigger="hover"
                  :content="self.showQueryColumnsButton.title"
                >
                  <template #reference>
                    <el-button type="primary" :icon="self.showQueryColumnsButton.icon" style="margin-bottom:10px;padding-left:5px;padding-right:5px"
                      @click="self.showQueryColumnsButton.onclick">
                      </el-button>
                  </template>
                </el-popover>

              </el-button-group>

              <!-- <el-button type="primary" style="margin-bottom:10px;"
                @click="self.handleExport" :loading="self.loadingExport">
                导出</el-button> -->
              <el-button type="primary" style="margin-bottom:10px;"
                @click="self.editDialogInfo.show({...self, title: '添加', dialogInfo:self.editDialogInfo})">
                添加</el-button>
              <el-button type="primary" style="margin-bottom:10px;"
                @click="self.editDialogInfo.show({...self, title: '编辑', dialogInfo:self.editDialogInfo})">
                编辑</el-button>
              
              <el-button type="danger" style="margin-bottom:10px;"
                @click="self.handleDelete" :loading="self.loadingDelete">
                删除</el-button>
              <el-dropdown split-button type="primary"
                trigger="click"
                :style="'margin-bottom:10px;'"
                @click="self.batchUpdateValueButton.onclick({...self, button:self.batchUpdateValueButton})"
                @command="self.batchUpdateValueButton.oncommand">
                {{self.batchUpdateValueButton.title}}
                <template #dropdown>
                  <el-dropdown-menu>
                    <template v-for="(item,index) in self.batchUpdateValueButton.list" :key=index>
                      <el-dropdown-item :command="item.label">{{item.label}}</el-dropdown-item>
                    </template>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <template v-for="(button,index) in self.buttons" :key=index>
                <el-button v-if="!button.hide" :type="button.type || 'primary'" style="margin-bottom:10px;"
                  @click="button.onclick({...self, button})" :loading="button.loading">
                  {{button.label}}</el-button>
              </template>
            </div>
          </div>
          <div id='container-table' v-if="self.hideTable" style="width:100%;height:70vh;">
          </div>
          <div v-if="!self.hideTable">
            <el-table :data="self.tableData" border class="table" ref="multipleTable"
                  @row-click="self.onRowClick"
                  @selection-change="self.onTableSelectionChange"
                  @cell-dblclick="self.cellDblclick"
                  @cell-click="self.cellClick"
                  @cell-mouse-enter="self.cellMouseEnter"
                  @cell-mouse-leave="self.cellMouseLeave"
                  @current-change="self.handleCurrentChange"
                  :highlight-current-row="true"
                  :height="tableHeight"
                  :max-height="tableHeight"
                  header-cell-class-name="table-header">
                <el-table-column
                  type="selection"
                  v-if="self.selection!==false"
                  width="60"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  type="index"
                  v-else
                  width="60"
                  fixed="left"
                >
                <template #default="scope">
                  <i v-if="scope.row.selected">
                    <el-icon color="blue">
                      <CircleCheck />
                    </el-icon>
                  </i>
                </template>
                </el-table-column>
                <template v-for="(item, index) in self.columns">
                <el-table-column v-if="item.hide !== true" :key = index
                      row-style="{height:30px; max-height:30px;}"
                      :prop="item.prop" :label="item.label+'('+item.prop+')'" :width="item.width||200">
                        <!-- show-overflow-tooltip -->
                    <template #default="scope">
                      <template v-if="item.prop == 'name_diff' && scope.row[item.prop] && scope.row[item.prop].indexOf('相同') < 0 && scope.row[item.prop].indexOf('未找到') < 0">
                        <el-button type="text" @click="self.showDiff(scope)">
                              显示
                          </el-button>
                        {{scope.row[item.prop]}}
                      </template>
                      <template v-else>
                        <span v-if="scope.row[item.prop] && (scope.row[item.prop]+'').length > 10">
                          <el-popover placement="top-start" width="300" trigger="hover" :content="scope.row[item.prop]">
                            <template #reference>
                              <span>{{ scope.row[item.prop] }}</span>
                            </template>
                          </el-popover>
                        </span>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                      </template>
                    </template>

                    <template #header="{ column }">
                      <p v-if="item.sortable !== false" @click="self.sortMethod(column)">
                        <span>{{ column.label }}</span>
                        <span
                          v-if="item.order === 'asc' || item.order === 'asc/gbk'"
                          style="font-size: 1.5em"
                        >
                          <el-icon color="mediumseagreen">
                            <CaretTop />
                          </el-icon>
                          <span style="font-size: 0.5em; color: mediumseagreen">
                            {{ item.orderIndex }}
                          </span>
                        </span>
                        <span
                          v-else-if="item.order === 'desc' || item.order === 'desc/gbk'"
                          style="font-size: 1.5em"
                        >
                          <el-icon color="mediumseagreen">
                            <CaretBottom />
                          </el-icon>
                          <span style="font-size: 0.5em; color: mediumseagreen">
                            {{ item.orderIndex }}
                          </span>
                        </span>
                        <span v-else style="font-size: 1.5em">
                          <el-icon color="lightgray">
                            <DCaret />
                          </el-icon>
                        </span>
                      </p>
                      <p v-else>
                        <span>{{ column.label }}</span>
                      </p>
                    </template>
                </el-table-column>
                </template>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" ref="tablePagination"
                    :current-page="self.query.pageNo"
                    :page-size="self.query.pageSize"
                    :page-sizes="self.pageSizes"
                    :total="self.pageTotal"
                    @size-change="self.handleSizeChange"
                    @current-change="self.handlePageChange"></el-pagination>
            </div>
          </div>
        </div>

        <editDialog
          :dialogInfo="self.editDialogInfo"
          :self="self">
        </editDialog>
    </div>
</template>


<script>
import { ref, onMounted } from 'vue'
import editDialog from './edit_dialog.vue'
import { Search, Close, CircleCheck,CaretTop,CaretBottom,DCaret } from '@element-plus/icons-vue'

export default {
    components:{
      editDialog,
    },
    props: {
      self:{}
    },
    setup(prop,context) {
      
        const multipleTable = ref(null)
        const editDialog = ref(null)
        const editForm = ref(null)
        const tablePagination = ref(null)
        const tableHeight = ref('70vh')
        onMounted(() => {
          setTimeout( () => {
            const newHeight = window.innerHeight - tablePagination.value.$el.offsetHeight - 110 - multipleTable.value.$el.offsetTop
            if (tableHeight.value != newHeight) {
              tableHeight.value = newHeight
            }
            context.emit('baseMounted', {multipleTable, editDialog, editForm})
          }, 0)
        })
        prop.self.onresize = () => {
          setTimeout( () => {
            if (tablePagination && tablePagination.value && tablePagination.value.$el) {
              const newHeight = window.innerHeight - tablePagination.value.$el.offsetHeight - 110 - multipleTable.value.$el.offsetTop
              if (tableHeight.value != newHeight) {
                tableHeight.value = newHeight
              }
            }
          }, 0)
        }
        window.onresize = prop.self.onresize

        window.display_popover = ref(false)
        return {
          multipleTable,
          editDialog,
          editForm,
          tablePagination,
          tableHeight,
          display_popover: window.display_popover,
          Search,
          Close,
          CircleCheck,
          CaretTop,
          CaretBottom,
          DCaret,
        };
    },
};
</script>

<style scoped>
</style>
